<template>
  <div class="rotate" @mouseout="handleOut" @mousemove="handleMove">
    <div
      class="item"
      v-for="(l, i) in list"
      :key="`rotate-item${i}`"
      @click.stop="handleClick(i)"
      :class="{
        isActive: i == currIdx,
        'isActive-prev': i == currIdx - 1,
      }"
    >
      <img :src="l" alt="" class="img" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      list: [],
      currIdx: 1,
      timer: null,
      cyclicality: 3000,
    };
  },
  mounted() {
    this.init();
    this.timer = setInterval(() => {
      this.next();
    }, this.cyclicality);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    next() {
      const { currIdx, list } = this;
      if (currIdx == list.length - 2) {
        this.currIdx = 1;
        return;
      }
      this.currIdx++;
    },
    prev() {
      const { currIdx, list } = this;
      if (currIdx == 1) {
        this.currIdx = list.length - 2;
        return;
      }
      this.currIdx--;
    },
    init() {
      const { list } = this;
      if (!list.length) return;
      const last = list[list.length - 1];
      const first = list[0];
      this.list.unshift(last);
      this.list.push(first);
    },
    handleClick(idx) {
      // const { currIdx } = this;
      // if (idx > currIdx) this.next();
      // if (idx < currIdx) this.prev();
    },
    handleMove() {
      clearInterval(this.timer);
    },
    handleOut() {
      this.timer = setInterval(() => {
        this.next();
      }, this.cyclicality);
    },
  },
  watch: {
    data: {
      handler(v) {
        this.list = v;
      },
      immediate: true,
    },
  },
};
</script>

<style scoped lang='scss'>
.rotate {
  height: vh(166px);
  position: relative;
  margin-bottom: vh(44px);
  .item {
    cursor: pointer;
    position: absolute;
    width: vw(316px);
    transition-duration: 1.2s;
    transform: scale(0.8);
    opacity: 0.2;

    .img {
      width: 100%;
      -webkit-box-reflect: below vh(10px) -webkit-gradient(linear, left top, left
            bottom, from(transparent), color-stop(75%, transparent), to(rgba(250, 250, 250, 0.4)));
    }
  }
  .isActive {
    left: 50%;
    z-index: 3;
    transform: translateX(-50%);
    color: #000;
    opacity: 1;

    // 下一个兄弟元素
    & + div {
      right: 0;
      z-index: 1;
    }
  }
  .isActive-prev {
    z-index: 2;
  }
}
</style>
    